<template>
  <div>
    <el-button type="primary" @click="addSpec()" link>新的规格</el-button>
    <el-button type="primary" @click="selectSpecTpl()" link>选择规格模板</el-button>
  </div>
  <el-table :data="specValue" stripe style="width: 100%" :editable="true" border>
    <el-table-column prop="title" label="规格名称" width="150px" align="center">
      <template #default="scope">
        <div style="display: flex">
          <el-input type="text" v-model="scope.row.title" clearable style="text-align: center" />
          <el-popconfirm title="你确认删除该规格吗" @confirm="removeSpec(scope.row, scope.$index)">
            <template #reference>
              <el-button type="primary" link>
                <el-icon style="color: red">
                  <Delete />
                </el-icon>
              </el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="item" label="规格值" align="center">
      <template #default="scope">
        <div style="display: flex; flex-wrap: wrap">
          <div v-for="(_item, index) in scope.row.item" style="margin: 5px" :key="index">
            <el-input type="text" v-model="scope.row.item[index]" clearable style="text-align: center; width: 110px" />
            <el-popconfirm title="你确认删除该规格值吗" @confirm="removeSpecValue(scope.row, scope.$index, index)">
              <template #reference>
                <el-button type="primary" link>
                  <el-icon style="color: red">
                    <Delete />
                  </el-icon>
                </el-button>
              </template>
            </el-popconfirm>
          </div>
          <el-button type="primary" @click="addSpecValue(scope.row, scope.$index)" link>新增</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>

  <KoiDialog
    ref="koiDialogRef"
    title="选择规格模板"
    :height="60"
    @koiConfirm="handleConfirm"
    @koiCancel="handleCancel"
    :loading="loading"
  >
    <template #content>
      <el-row>
        <el-select v-model="tplValue" placeholder="请选择规格模板" size="large">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-row>
    </template>
  </KoiDialog>
</template>

<script setup lang="ts" name="ColeSpec">
import { ref } from "vue";
import { koiMsgWarning, koiMsgBox } from "@/utils/koi";
import { getAll } from "@/api/pms/spectpl/index.ts";
import { watchDeep } from "@vueuse/core";


const options = ref<any>([]);
const loading = ref<any>(false);
const koiDialogRef = ref<any>();
const tplValue = ref<any>(null);

interface IAttachmentProps {
  spec: any;
}

// 子组件接收父组件的值
// withDefaults：设置默认值  defineProps：接收父组件的参数
const props = withDefaults(defineProps<IAttachmentProps>(), {
  spec: []
});

watchDeep(
  () => props.spec,
  () => {
    // 父组件传递回显数据
    specValue.value = props.spec;
  }
);
const emits = defineEmits(["updateSpec"]);
const specValue = ref(props.spec);

const addSpecValue = (_row: any, index: any) => {
  if (specValue.value[index].item.length >= 5) {
    koiMsgWarning("规格值不能超过5个");
    return;
  }
  specValue.value[index].item.push("");
  emits("updateSpec", specValue.value);
};
const removeSpecValue = (_row: any, valueIndex: any, itemIndex: any) => {
  specValue.value[valueIndex].item.splice(itemIndex, 1);
  emits("updateSpec", specValue.value);
};
const removeSpec = (_row: any, valueIndex: any) => {
  specValue.value.splice(valueIndex, 1);
  emits("updateSpec", specValue.value);
};
const addSpec = () => {
  if (specValue.value.length >= 3) {
    koiMsgWarning("规格不能超过3个");
    return;
  }
  specValue.value.push({
    title: "",
    item: []
  });
  emits("updateSpec", specValue.value);
};

const selectSpecTpl = () => {
  koiDialogRef.value.koiOpen();
  getAll().then(r => {
    options.value = r.data.map((r: any) => {
      return {
        label: r.name,
        value: r.id,
        data: r.value
      };
    });
  });
};

const handleCancel = () => {
  koiDialogRef.value.koiClose();
};
const handleConfirm = () => {
  koiMsgBox("您确认选择该规格模板吗?这将会覆盖你现有的商品规格")
    .then(async () => {
      const res = options.value.find((r: any) => r.value === tplValue.value);
      if (res) {
        specValue.value = res.data;
        emits("updateSpec", specValue.value);
        console.log(`specValue.value`, JSON.stringify(specValue.value));
      }
      koiDialogRef.value.koiClose();
    })
    .catch((_r: any) => {});
};
</script>

<style scoped></style>
